<template>
<div class="a">
     <div class="con b">
            <div class="item1 ">语文</div>
            <div class="item2 ">数学</div>
            <div class="item3 ">英语</div>
            <div class="item4 ">科学</div>
    </div>
</div>
</template>

<script>
export default {
    data(){
      return{}
            },
            methods: {
            }
}
</script>
<style scoped>
.con{
    display: flex;
    height: 60px;
     background: #334453;
     flex-direction: row;
     justify-content:center;
     margin-bottom: 10px;
}
.item1,
.item2,
.item3,
.item4{
    background: #334453;
    height: 60px;
    width:100px ;
    line-height: 60px;
    text-align: center;
    color:aliceblue;
    cursor: pointer;
}
.item2{
    background: #1890ff;
}
.item1:hover,
.item2:hover,
.item3:hover,
.item4:hover{
    background: #1890ff;
}
.a{
    height: 10000000px;
    background: #9bd0ff;
}
.b{
    position: fixed;
    top: 0;
}
</style>
